import React from 'react';

const HomeSlide = ({ props }) => {
    return (
        <div className='flex justify-center w-full pad'>
            <div className='home-sidebar-container'>
                <div className='sticky top-5'>
                    <div className='sidebar-links'>
                        <div className="site-info"><div className="site-name  ">Theme Redefine</div><div className="announcement">Redefine your writing.</div></div>
                        <a className="links" href="/archives"><i className="fa-regular fa-archive icon-space"></i> <span className="link-name">Archives</span> </a>
                        <a className="links" href="/tags"><i className="fa-regular fa-tags icon-tags icon-space"></i> <span className="link-name">Tags</span> </a>
                        <a className="links" href="/categories"><i className="fa-regular fa-folder icon-space"></i> <span className="link-name">Categories</span> </a>
                        <a className="links" href="/shuoshuo"><i className="fa-regular fa-comment-dots icon-space"></i> <span className="link-name">Shuoshuo</span> </a>
                    </div>
                    <div className='sidebar-content'>
                        <div className="avatar flex justify-center"><img src="/next.svg" /></div>
                        <div className="author flex flex-col justify-center my-2.5 mx-0"><div className="name text-center">The Redefine Team</div><div className="label">MVP++</div></div>
                        <div className="statistics">
                            <a className="item" href="/tags">
                                <div className="number">{props.tags}</div>
                                <div className="label">Tags</div>
                            </a>
                            <a className="item" href="/categories">
                                <div className="number">{props.categories}</div>
                                <div className="label">Categories</div>
                            </a>
                            <a className="item" href="/Posts">
                                <div className="number">{props.posts}</div>
                                <div className="label">Posts</div>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            <div className='main-content'>
                <div className='home-content-container'>
                    <ul className='home-article-list'>
                        <li className='home-article-item'>
                            <div className="stickylabel absolute top-[12px] right-[12px] text-[0.7rem] text-white py-[2px] px-[10px] border  hover:text-white cursor-default">
                                <i className="fa-regular fa-tags mr-[3px] text-[0.65rem]"></i>Sticky
                            </div>
                            <div id="home-article-thumbnail" className="relative h-[150px] overflow-hidden rounded-t-[10.8px] md:rounded-t-large -m-5 mb-3 sm:-m-6 sm:mb-4 md:-m-7 md:mb-5">
                                <a href="/2022/10/02/theme-demo/">
                                    <img src="https://evan.beee.top/img/redefine-1-final.webp" alt="主题样式 Demo" className="w-full h-full object-cover dark:brightness-75 transition-all" />
                                </a>
                            </div>
                            <h3 className="home-article-title"><a href="/2022/10/02/theme-demo/">主题样式 Demo</a></h3>
                            <div className="home-article-content markdown-body">H1 标题H2 标题H3 标题H4标题H5 标题H6 标题加粗 斜体 删除线 这是一段文本 行内代码 1代码块 1print("代码高亮") 功能展示Font Awesome Pro v6.2.1Solid: R...</div>
                            <div className="home-article-meta-info-container">
                                <div className="home-article-meta-info">
                                    <span className='flex items-center mr-[3px]'>
                                        <i className="fa-solid fa-tags"></i>
                                        &nbsp;
                                        <span className="home-article-date" data-date="Sun Oct 02 2022 19:07:05 GMT+0000">2022-10-02 </span>
                                    </span>
                                    <span className="home-article-category flex items-center mr-[3px]">
                                        <i className="fa-solid fa-tags"></i>
                                        &nbsp;
                                        <ul>
                                            <li><a href="/categories/Demo/">Demo</a>&nbsp;</li>
                                            <li>&gt;</li>
                                            <li><a href="/categories/Demo/Hexo/">Hexo</a>&nbsp;</li>
                                            <li>&gt;</li>
                                            <li><a href="/categories/Demo/Hexo/Redefine-Theme/">Redefine Theme</a>&nbsp;</li>
                                        </ul>
                                    </span>
                                    <span className="home-article-tag flex items-center">
                                        <i className="fa-solid fa-tags"></i>
                                        &nbsp;
                                        <ul>
                                            <li><a href="/tags/Demo/">Demo</a>&nbsp;</li>
                                            <li>| <a href="/tags/Hexo/">Hexo</a>&nbsp;</li>
                                            <li>| <a href="/tags/Hexo-Theme/">Hexo Theme</a>&nbsp;</li>
                                        </ul>
                                    </span>
                                </div>
                                <a href="/2022/10/02/theme-demo/">Read more
                                    <span className="seo-reader-text">主题样式 Demo</span>
                                    &nbsp;
                                    <i className="fa-solid fa-angle-right"></i>
                                </a>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
            <style jsx>
                {`
                    .pad{
                        padding: 38px 0;
                    }
                    .home-sidebar-container{
                        width: 240px;
                        height: auto;
                        margin: 0 38px;
                    }
                    .sidebar-links{
                        padding: 15px;
                        border-radius: 18px;
                        box-sizing: border-box;
                        background: #fff;
                        box-shadow: rgba(0,0,0,0.5) 0px 6px 24px 0px, rgba(0,0,0,0.8)0px 0px 0px 1px;
                    }
                    .sidebar-content{
                        margin-top:22.8px;
                        padding: 20px;
                        border-radius: 18px;
                        box-sizing: border-box;
                        background: #fff;
                        box-shadow: rgba(0,0,0,0.5) 0px 6px 24px 0px, rgba(0,0,0,0.8)0px 0px 0px 1px;
                    }
                    .site-info{
                        background-color: #fafafa;
                        margin: -15px -15px 10px -15px;
                        border-radius: 18px 18px 0 0;
                        padding: 15px;
                        border-bottom: 1px solid rbga(0,0,0,0.8);
                    }
                    .site-name{
                        font-size: 1.2rem;
                        font-weight: 500;
                        color: #343a3c;
                        font-family: Chillax-Variable,sans-serif;
                        text-align: center;
                    }
                    .announcement{
                        font-size: .9rem;
                        color: #5c6669;
                        text-align: center;
                        margin-top: 10px;
                        margin-bottom: 5px;
                    }
                    .home-sidebar-container .sidebar-links .links{
                      padding: 5px 0;
                      display: flex;
                      justify-content: center;
                      align-items: center;
                      color: #343a3c;
                      text-align: left;
                      border-radius: 9px;
                      cursor: pointer;
                      font-family: Satoshi-Variable,Noto Sans SC,-apple-system,system-ui,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif,BlinkMacSystemFont,Helvetica Neue,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Arial;
                    }
                    .home-sidebar-container .sidebar-content .author .name {
                      text-align: center;
                      font-size: 1.2rem;
                      font-weight: 600;
                      color: #343a3c;
                    }
                    .home-sidebar-container .sidebar-content .author .label {
                      text-align: center;
                      font-size: .8rem;
                      color: #5c6669;
                    }
                    .home-sidebar-container .sidebar-content .statistics {
                      display: flex;
                      justify-content: space-around;
                      margin: 10px 0;
                    }
                    .home-sidebar-container .sidebar-content .statistics .item {
                      display: flex;
                      flex-direction: column;
                      justify-content: center;
                      align-items: center;
                      width: 80px;
                    }

                    .page-container .main-content-container .main-content-body .main-content {
                        position: relative;
                        box-sizing: border-box;
                        width: 80%;
                        max-width: 1000px;
                        height: 100%;
                        transition-property: color,background,box-shadow,border-color,max-width,width;
                        transition-delay: 0s,0s,0s,0s,0s,0s;
                        transition-duration: .2s,.2s,.2s,.2s,.2s,.2s;
                        transition-timing-function: ease,ease,ease,ease,ease,ease;
                    }
                    .home-content-container{margin-right: 38px;}
                    ul{
                        list-style: none;
                        margin: 0;
                        padding: 0;
                    }
                    .home-content-container .home-article-list .home-article-item{
                        position: relative;
                        padding: 28px;
                        border-radius: 18px;
                        box-sizing: border-box;
                        background: #fff;
                        background-color: rgba(255,255,255,0.8)
                        margin-bottom: 38px;
                        box-shadow: rgba(0,0,0,0.5) 0px 6px 24px 0px, rgba(0,0,0,0.8)0px 0px 0px 1px;
                        transition-property: color,background,box-shadow,border-color,transform;
                        transition-delay: 0s,0s,0s,0s,0s;
                        transition-duration: .2s,.2s,.2s,.2s,.2s;
                        transition-timing-function: ease,ease,ease,ease,linear;
                    }
                     .home-article-title {
                        position: relative;
                        font-weight: 700;
                        font-size: 1.4rem;
                        line-height: 1.5;
                        color: #343a3c;
                        font-family: Satoshi-Variable,sans-serif,'Noto Sans SC',sans-serif,'Noto Sans SC',sans-serif;
                        margin: 0;
                    }
                    a{
                        color: inherit;
                        text-decoration: inherit;
                    }
                     .home-article-content {
                        word-wrap: break-word;
                        text-align: justify;
                        margin: 20px 0;
                        color: #373d3f;
                    }
                    .home-article-meta-info-container {
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        font-size: .92rem;
                        color: #5c6669;
                    }
                    .home-article-meta-info {
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        letter-spacing: .5px;
                    }
                    .home-content-container .home-article-list .home-article-item .home-article-meta-info-container .home-article-meta-info span ul li{
                        display:inline;
                    }
                    .stickylabel{
                        background-color: #ffffff26;
                        .border-border-color:#00000014;
                        z-index: 1001;
                        border-radius: 14px;
                    }



                `}
            </style>
        </div>
    )
}

export default HomeSlide